<template>
    <div class="row">
        <textarea v-model="text" class="col-6" style="height: 50vh;resize: none;"></textarea>
        <div class="col-6 view" >{{ item ? item.content : '' }}</div>
        <input :disabled="item.name !== undefined" v-model="name" class="col-7 mt-1" placeholder="日志名称">
        <textarea v-model="summary" class="col-7 mt-2" cols="3" placeholder="摘要" style="resize: none;"></textarea>
        <input type="hidden" :value="item.id">
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            text: '',
            summary: '',
        }
    },
    props: ['item'],
    emits: ['name', 'text', 'summary'],
    mounted() {
        if (this.item) {
            this.name = this.item.name
            this.text = this.item.content
            this.summary = this.item.summary
        }
    },
    methods: {
    },
    watch: {
        name(newVal, oldVal) {
            this.$emit('name', this.name)
        },
        text(newVal, oldVal) {
            this.$emit('text', this.text)
        },
        summary(newVal, oldVal) {
            this.$emit('summary', this.summary)
        },
        item(newVal, oldVal) {
            this.name = newVal
            this.text = newVal
            this.summary = newVal
        }
    },
    computed: {
    }
}
</script>

<style>
.view {
    height: 50vh;
    background-color: rgba(153, 245, 191, 0.98);
    background-size: contain;
    overflow-y: scroll;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
